<template>
  <div class="row">
    <h1>两个列表之间互相拖拽</h1>
    <div class="col-3">
      <h3>可拖拽列表1</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log" v-bind="dragOptions">
        <transition-group>
          <div
            class="list-group-item"
            v-for="(element, index) in list1"
            :key="element.name"
          >
            {{ element.name }} {{ index }}
          </div>
        </transition-group>
      </draggable>
    </div>

    <div class="col-3">
      <h3>可拖拽列表2</h3>
      <draggable class="list-group" :list="list2" group="people" @change="log" v-bind="dragOptions">

        <transition-group>
          <div
            class="list-group-item"
            v-for="(element, index) in list2"
            :key="element.name"
          >
            {{ element.name }} {{ index }}
          </div>
        </transition-group>
      </draggable>
    </div>


  </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
  name: "DragAndMove",
  display: "Two Lists",
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        {name: "John", id: 1},
        {name: "Joao", id: 2},
        {name: "Jean", id: 3},
        {name: "Gerard", id: 4}
      ],
      list2: [
        {name: "Juan", id: 5},
        {name: "Edgard", id: 6},
        {name: "Johnson", id: 7}
      ]
    };
  },
  computed: {
    /**
     * 拖拽动画效果的选项
     * 直接通过 v-bind="dragOptions" 绑定到 draggable 组件上
     * v-bind 会自动把 dragOptions 中的所有属性展开并 依次绑定
     */
    dragOptions() {
      return {
        animation: 200,
        // group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  methods: {

    log: function (evt) {
      window.console.log(evt);
    }
  }
};
</script>
<style>
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}

.col-3 {
  float: left;
  width: 500px;
  margin: 10px 10px;
}
</style>
